---
name: useIsClient
rank: 22
tagline: Determine whether the code is running on the client-side or server-side with useIsClient.
sandboxId: useisclient-4edyux
previewHeight: 240px
relatedHooks:
  - userenderinfo
---

import CodePreview from "../../components/CodePreview.astro";
import HookDescription from "../../components/HookDescription.astro";
import StaticCodeContainer from "../../components/StaticCodeContainer.astro";

<HookDescription name={frontmatter.name}>
  useIsClient is useful for determining if it's safe to run certain client-only hooks like useMediaQuery or useLocalStorage. It returns a boolean determining if React's useEffect hook has finished running (which means the app is being rendered on the client and it's safe to use browser specific APIs).
</HookDescription>

<div class="reference">
  ### Parameters

  The `useIsClient` hook does not accept any parameters.

  ### Return Value

  <div class="table-container">
  | Name     | Type    | Description                                                        |
  | -------- | ------- | ------------------------------------------------------------------ |
  | isClient | boolean | `true` if running in a client-side environment, `false` otherwise. |
  </div>
</div>

<CodePreview
  sandboxId={frontmatter.sandboxId}
  previewHeight={frontmatter.previewHeight}
/>

<StaticCodeContainer>

```jsx
import * as React from "react";
import { useIsClient } from "@uidotdev/usehooks";

export default function App() {
  const isClient = useIsClient();

  return (
    <section>
      <h1>useIsClient</h1>
      <h6>Is Client? </h6>
      <p>{isClient ? "If you can see this ... you already know" : "No"}</p>
    </section>
  );
}
```

</StaticCodeContainer>
